<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>落叶</title>
</head>
<!--        引入样式文件-->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../css/index.css">
<body>
<div id="home" class="content">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                        <el-tab-pane label="首页" name="test.html">首页</el-tab-pane>
                        <el-tab-pane label="精华" name="test2.html">精华</el-tab-pane>
                        <el-tab-pane label="随笔" name="third">随笔</el-tab-pane>
                        <el-tab-pane label="你装饰了别人的梦" name="fourth">你装饰了别人的梦</el-tab-pane>
                    </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <!--        表格，文章标题和-->
            <div>
                <ul>
                    <li>
                        <div class="list_con">
                            <div class="title">
                                <h2>
                                    <!--                            这里是标题-->
                                    <a href="article.html?id=1" v-text="article.title"></a>
                                </h2>
                            </div>
                            <div class="subtitle" v-text="article.subtitle">

                            </div>
                            <div class="user">
                                <dt><a href="" class="user_img" target="_blank">
             <!--<el-avatar size="small" :src="circleUrl" alt="777" fit="fill" shape="square"></el-avatar>-->
                                    <el-image
                                            style="width: 24px; height: 24px"
                                            :src="article.user.circleUrl"
                                            :fit="fit"></el-image>
                                </a></dt>
                                <dd><a href="" target="_blank" class="name" v-text="article.user.username"></a>
                                    <el-badge :value="article.valueOfShare" class="share">
                                        <el-button icon="el-icon-share"></el-button>
                                    </el-badge>
                                    <el-badge :value="article.valueOfComment" class="item">
                                        <el-button icon="el-icon-chat-line-round"></el-button>
                                    </el-badge>
                                </dd>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </el-main>
        <el-footer>
<!--            CopyRight@copy2012 -->
            <span style="font-size: 10px">CopyRight@许闻涛2020</span>
        </el-footer>
    </el-container>

</div>


</body>

<!-- 引入组件库 -->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/getUrlParam.js"></script>


<script>
    new Vue({
        el: "#home",
        data() {
            return {
                page: 'test.html',
                activeName: 'test.html',
                count: 10,
                loading: false,
                fit: 'fill',
                article: {
                    title: '@SpringBootApplication注解到底做了什么，你真的了解吗？',
                    subtitle: '@SpringBootApplication@Target(ElementType.TYPE)@Retention(RetentionPolicy.RUNTIME)@Documented@Inherited@SpringBootConfiguration@EnableAutoConfiguration@ComponentScan(excludeFilters = { @Filte...',
                    valueOfComment: 10,
                    valueOfShare: 15,
                    user:{
                        username: '许闻涛',
                        circleUrl: 'https://xwt-leyou.oss-cn-shanghai.aliyuncs.com/3.2.jpg',
                    }
                }
            }
        },
        computed: {
            noMore() {
                return this.count >= 20
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            handleClick() {
                this.page = this.activeName
            },
        }
    })


</script>

</html>